<template>
    <view class="medicationSearch">
        <Navigation title="用药自查" background="#fff" />
        <view class="search ph-32 pv-12 h-88">
            <view class="w-686 h-64 search-box">
                <u-search
                    placeholder="请输入您想要搜索的内容"
                    v-model="keywords"
                    bgColor="#F5F5F5"
                    height="32"
                    :showAction="false"
                    searchIconColor="#CCCCCC"
                    placeholderColor="#CCCCCC"
                    :clearabled="false"
                ></u-search>
                <view class="text fs-30 text-color4 w-108" @click="searchTap">搜索</view>
            </view>
        </view>
        <scroll-view scroll-y="true" class="list ph-32" :style="{ height: height - 40 + 'px' }">
            <view class="pv-28 list-box" v-for="(item, index) in list" :key="index" @click="toMedicationDetail(item)">
                <view class="fs-32 text-color4">{{ item.medicineName }}</view>
                <view class="mt-8 fs-24 text-color3">{{ item.indications }}</view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { medicineSimpleQuery } from '@/services/api/index/index';
const keywords = ref<string>('');
const list = ref<any[]>([]);
async function searchTap() {
    if (keywords.value) {
        const { data } = await medicineSimpleQuery({ keyWord: keywords.value });
        list.value = data;
    }
}
function toMedicationDetail(data: any) {
    uni.navigateTo({ url: `/pages_index/medicationDetail?id=${data.id}` });
}
let systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
let pageHeight = systemInfo.windowHeight;
const height = pageHeight - statusBarHeight - 46;
</script>
<style lang="scss" scoped>
.medicationSearch {
    overflow: hidden;
    .list {
        .list-box {
            border-bottom: 1px solid #f5f5f5;
        }
    }
    .search {
        background: #fff;
        .search-box {
            position: relative;
            .text {
                position: absolute;
                right: 0rpx;
                top: 11rpx;
                z-index: 1;
                text-align: center;
            }
            .text::after {
                content: '';
                position: absolute;
                left: 0rpx;
                top: 7rpx;
                width: 1px;
                height: 32rpx;
                background: #dddddd;
            }
        }
    }
    ::v-deep .u-search__content {
        border-radius: 8rpx !important;
    }
    ::v-deep .u-search__content {
        justify-content: flex-start !important;
    }
    ::v-deep .u-search__content__input {
        width: 80%;
        flex: none !important;
    }
}
</style>
